<template>
  <div class="box">
    <el-divider content-position="center">血常规检查</el-divider>
    <div v-if="info.assayImageDetail" v-for="(item,index) in info.physicalAssayImageArr" :key="index">
      <div class="box-info">
        <div class="info-box">
          <span>检查时间 :</span>&nbsp;&nbsp;
          <div>{{ item.checkTime ? item.checkTime : '无' }}</div>
        </div>
        <div class="info-box">
          <span>白细胞 :</span>&nbsp;&nbsp;
          <div>{{ item.leukocyte ? item.leukocyte + ' 10^9/L' : '无' }}</div>
        </div>
        <div class="info-box">
          <span>中性粒 :</span>&nbsp;&nbsp;
          <div>{{ item.neutralKernel ? item.neutralKernel + ' %' : '无' }}</div>
        </div>
      </div>
      <div class="box-info">
        <div class="info-box">
          <span>淋巴细胞 :</span>&nbsp;&nbsp;
          <div>{{ item.lymphocyte ? item.lymphocyte + ' %' : '无' }}</div>
        </div>
        <div class="info-box">
          <span>单核细胞 :</span>&nbsp;&nbsp;
          <div>{{ item.monocyte ? item.monocyte + ' %' : '无' }}</div>
        </div>
        <div class="info-box">
          <span>异型淋巴细胞细胞 :</span>&nbsp;&nbsp;
          <div>{{ item.heterotropicLymphocyte ? item.heterotropicLymphocyte + ' %' : '无' }}</div>
        </div>
      </div>
      <div class="box-info">
        <div class="info-box">
          <span>C反应蛋白 :</span>&nbsp;&nbsp;
          <div>{{ item.creactiveProtein ? item.creactiveProtein + ' mg/L' : '无' }} </div>
        </div>
        <div class="info-box">
          <span>血小板 :</span>&nbsp;&nbsp;
          <div>{{ item.platelet ? item.platelet + ' 10^9/L' : '无' }} </div>
        </div>
        <div class="info-box">
          <span>报告时间 :</span>&nbsp;&nbsp;
          <div>{{ item.reportTime ? item.reportTime : '无' }}</div>
        </div>
      </div>
      <div class="box-info">
        <div class="info-box">
          <span>化验单 :</span>&nbsp;&nbsp;
          <div class="box-image" v-if="item.laboratoryTestReportUrl&&item.laboratoryTestReportUrl.length>0">
            <el-image style="width: 100%;height: 100%" :src="item.laboratoryTestReportUrl[0].url"></el-image>
          </div>
          <div v-else>
            无
          </div>
        </div>
      </div>
    </div>

    <div v-if="!info.assayImageDetail">
      <div class="box-info">
        <div class="info-box">
          <span>检查时间 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
        <div class="info-box">
          <span>白细胞 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
        <div class="info-box">
          <span>中性粒 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
      </div>
      <div class="box-info">
        <div class="info-box">
          <span>淋巴细胞 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
        <div class="info-box">
          <span>单核细胞 :</span>&nbsp;&nbsp;
          <div >无</div>
        </div>
        <div class="info-box">
          <span>异型淋巴细胞细胞 :</span>&nbsp;&nbsp;
          <div >无</div>
        </div>
      </div>
      <div class="box-info">
        <div class="info-box">
          <span>C反应蛋白 :</span>&nbsp;&nbsp;
          <div >无</div>
        </div>
        <div class="info-box">
          <span>血小板 :</span>&nbsp;&nbsp;
          <div >无</div>
        </div>
        <div class="info-box">
          <span>报告时间 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
      </div>
      <div class="box-info">
        <div class="info-box">
          <span>化验单 :</span>&nbsp;&nbsp;
          <div>
            无
          </div>
        </div>
      </div>
    </div>


    <el-divider content-position="center">尿常规</el-divider>
    <div v-if="info.physicalUrineReportArr&&info.physicalUrineReportArr.length>0"
         v-for="(item,index) in info.physicalUrineReportArr" :key="index">
      <div class="box-info">
        <div class="info-box">
          <span>报告时间 :</span>&nbsp;&nbsp;
          <div >{{ item.reportTime ? item.reportTime : '无' }}</div>
        </div>
        <div class="info-box">
          <span>化验单 :</span>&nbsp;&nbsp;
          <div class="box-image" v-if="item.laboratoryTestReportUrl&&item.laboratoryTestReportUrl.length>0">
            <el-image style="height: 100%;width: 100%" :src="item.laboratoryTestReportUrl[0].url"></el-image>
          </div>
          <div v-else>
            无
          </div>
        </div>
      </div>
    </div>

    <div v-if="!info.urineReportDetail">
      <div class="box-info">
        <div class="info-box">
          <span>报告时间 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
        <div class="info-box">
          <span>化验单 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
      </div>
    </div>

    <el-divider content-position="center">胸片</el-divider>
    <div class="info-box">
      <span>胸片 :</span>&nbsp;&nbsp;
      <span>{{ info.chestRadiograph === 1 ? '有' : '无' }}</span>
    </div>

    <div v-for="(item,index) in info.chestRadiographArr" :key="index"
         v-if="info.chestRadiograph === 1&&info.chestRadiographDetail">
      <div class="box-info">
        <div class="info-box">
          <span>报告时间 :</span>&nbsp;&nbsp;
          <div>{{ item.reportTime?item.reportTime:'无' }}</div>
        </div>
        <div class="info-box">
          <span>胸片图片 :</span>&nbsp;&nbsp;
          <div class="box-image" v-if="item.chestRadiographImageUrl&&item.chestRadiographImageUrl.length>0">
            <el-image :src="item.chestRadiographImageUrl[0].url" style="width: 100%;height: 100%"></el-image>
          </div>
          <div v-else>
            无
          </div>
        </div>
      </div>
      <div class="box-info">
        <div class="info-box">
          <span>胸片报告 :</span>&nbsp;&nbsp;
          <div class="box-image" v-if="item.chestRadiographReportUrl&&item.chestRadiographReportUrl.length>0">
            <el-image :src="item.chestRadiographReportUrl[0].url" style="width: 100%;height: 100%"></el-image>
          </div>
          <div v-else>
            无
          </div>
        </div>
      </div>
    </div>

    <div v-for="(item,index) in info.chestRadiographArr" :key="index"
         v-if="info.chestRadiograph === 1&&!info.chestRadiographDetail">
      <div class="box-info">
        <div class="info-box">
          <span>报告时间 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
        <div class="info-box">
          <span>胸片图片 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
      </div>
      <div class="box-info">
        <div class="info-box">
          <span>胸片报告 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
      </div>
    </div>


    <el-divider content-position="center">肺CT</el-divider>
    <div class="info-box">
      <span>肺CT :</span>&nbsp;&nbsp;
      <span>{{ info.lungCt === 1 ? '有' : '无' }}</span>
    </div>

    <div v-for="(item,index) in info.lungCtArr" :key="index" v-if="info.lungCtDetail&&info.lungCt===1">
      <div class="box-info">
        <div class="info-box">
          <span>报告时间 :</span>&nbsp;&nbsp;
          <div >{{ item.reportTime?item.reportTime:'无' }}</div>
        </div>
        <div class="info-box">
          <span>肺CT图片 :</span>&nbsp;&nbsp;
          <div class="box-image" v-if="item.lungCtImageUrl&&item.lungCtImageUrl.length>0">
            <el-image :src="item.lungCtImageUrl[0].url" style="width: 100%;height: 100%"></el-image>
          </div>
          <div v-else>无</div>
        </div>
      </div>
      <div class="box-info">
        <div class="info-box">
          <span>肺CT视频 :</span>&nbsp;&nbsp;
          <div v-if="item.lungCtVideoUrl&&item.lungCtVideoUrl.length>0">
            <!--            <video :src="item.lungCtVideoUrl[0].url" style="height: 100%;width: 100%"></video>-->
            <el-link icon="el-icon-video-play" type="primary" @click="playVideo(item.lungCtVideoUrl[0].url)">播放
            </el-link>
          </div>
          <div v-else>无</div>
        </div>
        <div class="info-box">
          <span>肺CT报告 :</span>&nbsp;&nbsp;
          <div class="box-image" v-if="item.lungCtReportUrl&&item.lungCtReportUrl.length>0">
            <el-image :src="item.lungCtReportUrl[0].url" style="width: 100%;height: 100%"></el-image>
          </div>
          <div v-else>无</div>
        </div>
      </div>
    </div>

    <div v-for="(item,index) in info.lungCtArr" :key="index" v-if="!info.lungCtDetail&&info.lungCt===1">
      <div class="box-info">
        <div class="info-box">
          <span>报告时间 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
        <div class="info-box">
          <span>肺CT图片 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
      </div>
      <div class="box-info">
        <div class="info-box">
          <span>肺CT视频 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
        <div class="info-box">
          <span>肺CT报告 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
      </div>
    </div>

    <el-divider content-position="center">呼出气体 - 一氧化氮检测</el-divider>

    <div v-for="(item,index) in info.carbonMonoxideArr" :key="index" v-if="info.carbonMonoxideDetail">
      <div class="box-info">
        <div class="info-box">
          <span>报告时间 :</span>&nbsp;&nbsp;
          <div>{{ item.reportTime ? item.reportTime : '无' }}</div>
        </div>
        <div class="info-box">
          <span>结果 :</span>&nbsp;&nbsp;
          <span>{{ item.result ? item.result : '无' }}</span>
        </div>
        <div class="info-box">
          <span>报告 :</span>&nbsp;&nbsp;
          <div class="box-image" v-if="item.carbonMonoxideReportUrl&&item.carbonMonoxideReportUrl.length>0">
            <el-image :src="item.carbonMonoxideReportUrl[0].url" style="width: 100%;height: 100%"></el-image>
          </div>
          <div v-else>无</div>
        </div>
      </div>
    </div>

    <div v-if="!info.carbonMonoxideDetail">
      <div class="box-info">
        <div class="info-box">
          <span>报告时间 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
        <div class="info-box">
          <span>结果 :</span>&nbsp;&nbsp;
          <span>无</span>
        </div>
        <div class="info-box">
          <span>报告 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
      </div>
    </div>

    <el-divider content-position="center">肺功能</el-divider>
    <div class="info-box">
      <span>肺功能 :</span>&nbsp;&nbsp;
      <span>{{ info.lungFeature === 1 ? '有' : '无' }}</span>
    </div>

    <div v-for="(item,index) in info.lungFeatureArr" :key="index" v-if="info.lungFeature===1&&info.lungFeatureDetail">
      <div class="box-info">
        <div class="info-box">
          <span>报告时间 :</span>&nbsp;&nbsp;
          <div >{{ item.reportTime ? item.reportTime : '无' }}</div>
        </div>
        <div class="info-box">
          <span>检测结果 :</span>&nbsp;&nbsp;
          <div class="box-image" v-if="item.lungFeatureResultImageUrl&&item.lungFeatureResultImageUrl.length>0">
            <el-image :src="item.lungFeatureResultImageUrl[0].url" style="height: 100%;width: 100%"></el-image>
          </div>
          <div v-else>无</div>
        </div>
      </div>
      <div class="box-info">
        <div class="info-box">
          <span>检测报告 :</span>&nbsp;&nbsp;
          <div class="box-image" v-if="item.lungFeatureReportImageUrl&&item.lungFeatureReportImageUrl.length>0">
            <el-image :src="item.lungFeatureReportImageUrl[0].url" style="height: 100%;width: 100%"></el-image>
          </div>
          <div v-else>无</div>
        </div>
        <div class="info-box">
          <span>舒张实验 :</span>&nbsp;&nbsp;
          <span>{{ item.diastolicTest === 1 ? '有' : '无' }}</span>
        </div>
        <div class="info-box">
          <span>报告时间 :</span>&nbsp;&nbsp;
          <div >{{ item.diastolicTestTime ? item.diastolicTestTime : '无' }}</div>
        </div>
      </div>
      <div class="box-info">
        <div class="info-box">
          <span>检测结果 :</span>&nbsp;&nbsp;
          <div class="box-image" v-if="item.diastolicTestResultUrl&&item.diastolicTestResultUrl.length>0">
            <el-image :src="item.diastolicTestResultUrl[0].url" style="height: 100%;width: 100%"></el-image>
          </div>
          <div v-else>无</div>
        </div>
        <div class="info-box">
          <span>检测报告 :</span>&nbsp;&nbsp;
          <div class="box-image" v-if="item.diastolicTestReportUrl&&item.diastolicTestReportUrl.length>0">
            <el-image :src="item.diastolicTestReportUrl[0].url" style="height: 100%;width: 100%"></el-image>
          </div>
          <div v-else>无</div>
        </div>
        <div class="info-box">
          <span>结论 :</span>&nbsp;&nbsp;
          <span>{{ item.conclusion === 1 ? '阴性' : item.conclusion === 2 ? '阳性' : '无' }}</span>
        </div>
      </div>
      <div class="box-info">
        <div class="info-box">
          <span>电子肺功能检测 :</span>&nbsp;&nbsp;
          <div class="box-image" v-if="item.corpuscleLungFeatureResult&&item.corpuscleLungFeatureResult.length>0">
            <el-image :src="item.corpuscleLungFeatureResult[0].url" style="height: 100%;width: 100%"></el-image>
          </div>
          <div v-else>无</div>
        </div>
      </div>
    </div>

    <div v-for="(item,index) in 2" :key="index" v-if="info.lungFeature===1&&!info.lungFeatureDetail">
      <div class="box-info">
        <div class="info-box">
          <span>报告时间 :</span>&nbsp;&nbsp;
          <div >无</div>
        </div>
        <div class="info-box">
          <span>检测结果 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
      </div>
      <div class="box-info">
        <div class="info-box">
          <span>检测报告 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
        <div class="info-box">
          <span>舒张实验 :</span>&nbsp;&nbsp;
          <span>无</span>
        </div>
        <div class="info-box">
          <span>报告时间 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
      </div>
      <div class="box-info">
        <div class="info-box">
          <span>检测结果 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
        <div class="info-box">
          <span>检测报告 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
        <div class="info-box">
          <span>结论 :</span>&nbsp;&nbsp;
          <span>无</span>
        </div>
      </div>
      <div class="box-info">
        <div class="info-box">
          <span>电子肺功能检测 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
      </div>
    </div>

    <el-divider content-position="center">支气管镜检查结果</el-divider>
    <div class="info-box">
      <span>支气管 :</span>&nbsp;&nbsp;
      <span>{{ info.bronchus === 1 ? '有' : '无' }}</span>
    </div>

    <div v-for="(item,index) in info.bronchusArr" :key="index" v-if="info.bronchus===1&&info.bronchusDetail">
      <div class="box-info">
        <div class="info-box">
          <span>报告时间 :</span>&nbsp;&nbsp;
          <div>{{ item.bronchusReportTime ? item.bronchusReportTime : '无' }}</div>
        </div>
        <div class="info-box">
          <span>镜下照片 :</span>&nbsp;&nbsp;
          <div class="box-image" v-if="item.mirrorUnderUrl&&item.mirrorUnderUrl.length>0">
            <el-image :src="item.mirrorUnderUrl[0].url" style="height: 100%;width: 100%"></el-image>
          </div>
          <div v-else>无</div>
        </div>
      </div>
      <div class="box-info">
        <div class="info-box">
          <span>录像 :</span>&nbsp;&nbsp;
          <div v-if="item.bronchusVideoUrl&&item.bronchusVideoUrl.length>0">
            <!--            <video :src="item.bronchusVideoUrl[0].url" style="height: 100%;width: 100%"></video>-->
            <el-link icon="el-icon-video-play" type="primary" @click="playVideo(item.bronchusVideoUrl[0].url)">播放
            </el-link>
          </div>
          <div v-else>无</div>
        </div>
        <div class="info-box">
          <span>支气管镜报告 :</span>&nbsp;&nbsp;
          <div class="box-image" v-if="item.bronchusReportUrl&&item.bronchusReportUrl.length>0">
            <el-image :src="item.bronchusReportUrl[0].url" style="height: 100%;width: 100%"></el-image>
          </div>
          <div v-else>无</div>
        </div>
      </div>
    </div>

    <div v-for="(item,index) in info.bronchusArr" :key="index" v-if="info.bronchus===1&&!info.bronchusDetail">
      <div class="box-info">
        <div class="info-box">
          <span>报告时间 :</span>&nbsp;&nbsp;
          <div >无</div>
        </div>
        <div class="info-box">
          <span>镜下照片 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
      </div>
      <div class="box-info">
        <div class="info-box">
          <span>录像 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
        <div class="info-box">
          <span>支气管镜报告 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
      </div>
    </div>

    <el-dialog
        title="视频播放"
        :visible.sync="centerDialogVisible"
        width="30%"
        :before-close="beforeClose"
        :show-close="false"
        :close-on-click-modal="false"
        center>
      <div>
        <vue-core-video-player v-if="showVideo"
                               :autoplay="false"
                               title="视频播放"
                               preload="nona"
                               :loop="true"
                               controls="auto"
                               :src="videoUrl"></vue-core-video-player>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="beforeClose">关 闭</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      centerDialogVisible: false,
      showVideo: false,
      audio: new Audio(),
      videoUrl: null
    }
  },
  props: ["info"],
  methods: {
    beforeClose() {
      this.centerDialogVisible = false
      this.showVideo = false
    },
    playVideo(url) {
      this.showVideo = true
      this.videoUrl = url
      this.centerDialogVisible = true
    },
  }
}
</script>

<style scoped lang="less">
.box {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  color: #0c4070;

  .box-info {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .info-box {
      width: 33%;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      box-sizing: border-box;

      //.box-border {
      //  padding: 5px 10px;
      //  box-sizing: border-box;
      //  border: 1px solid #ccc;
      //  display: flex;
      //  align-items: center;
      //  justify-content: center;
      //}

      .box-image {
        width: 50px;
        height: 50px;
        background-color: #d9d9d9;
      }
    }
  }
}
</style>
